<script setup>

import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, watch} from "vue";
import {useRoute} from "vue-router";
import router from "../router/index.js";

onBeforeMount(
    () => {
      console.log("Article onBeforeMount");
    }
)

onMounted(
    () => {
      console.log("Article onMounted");
    }
)

onBeforeUpdate(
    () => {
      console.log("Article onBeforeUpdate");
    }
)

onUpdated(
    () => {
      console.log("Article onUpdated");
    }
)

onBeforeUnmount(
    () => {
      console.log("Article onBeforeUnmount");
    }
)

onUnmounted(
    () => {
      console.log("Article onUnmounted");
    }
)

let route = useRoute()

watch(
    () => route.params.id,
    (newId, oldId) => {
      console.log("监控到 article 的 id 从 " + oldId + " 转变到 " + newId);
    },
    {
      immediate: true,
    }
)

</script>

<template>
  <h1>Article 页面</h1>
  <div>当前查看的 article {{ $route.params.id }}</div>
  <div>当前查看的 article {{ route.params.id }}</div>
</template>

<style scoped>

</style>